 <template>
   <div class="device_authorize_container flex gap-20px">
     <el-card class="flex-1 ">
        <template #header>
            <span>{{t('deviceManage.hardware_info_label')}}</span>
        </template>
        <div class="text-14px">
            <el-form label-suffix=" : "  >
                <el-form-item  :label="t('deviceManage.device_id_label')">
                    <span>{{activateInfo.hwid}}</span>
                </el-form-item>
                <el-form-item  :label="t('deviceManage.runningState_label')" v-if="activateInfo.status === 'success'">
                    {{activateInfo.status === 'success' ? t('deviceManage.normal_label') : ''}}
                </el-form-item>            
            </el-form>
        </div>
     </el-card>
     <el-card class="flex-1" v-if="activateInfo.status !== 'success'">
        <template #header>
            <span>{{t('deviceManage.certificate_authentication_label')}}</span>
        </template>
        <div>
            <div class="text-14px m-b-20px" v-if="fileConfig.fileName">
                <span>{{t('deviceManage.current_upload_certificate_file_label')}} : </span>
                <span>{{fileConfig.fileName}}</span>
            </div>
            <UpLoadFile 
            v-if="!fileConfig.uploadStatus||activateInfo.status !== 'success'"
            @handleUpload="handleUpload"
            />
        </div>
     </el-card>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue'
 export default defineComponent({
   name: 'DeviceAuthorize',
 })
 </script>
 <script setup  lang="ts">
import { LicenseApi } from '@/api/license'
import  {OtaApi} from '@/api/ota'
import { useI18n } from 'vue-i18n'
import { ElNotificationFn } from '@/utils/computedUtils'
const { t } = useI18n()
const activateInfo = ref<any>({
    status:'',
    hwid:'',
})
async function getActivateInfo() {
   const {data} = await LicenseApi.reqPostCheckActive()
   activateInfo.value = data
}
const fileConfig = ref<any>({
    fileName:'',
    uploadStatus:false
})
async function handleUpload(fileData:any,uploadProgress:any){
    try {
    const formData = new FormData()
    fileConfig.value.fileName = fileData.name
    formData.append('filedata',fileData)
    formData.append('filename',fileData.name)
    await OtaApi.uploadFile(formData,uploadProgress,null)
    await LicenseApi.reqPostActive({filename:fileData.name})
    fileConfig.value.uploadStatus = true
    getActivateInfo()
    ElNotificationFn('success',t('deviceManage.upload_file_success_label'))
    } catch (error) {
    ElNotificationFn('error',t('deviceManage.upload_file_failure_label'))
    fileConfig.value.uploadStatus = false
    } 
}
getActivateInfo()
</script>
 
<style  lang="scss" scoped>
@import '@/styles/card.scss';
@import '@/styles/form.scss';
.el-card {
        background: transparent;
        color: #fff;
        border: none;
 }
</style>
 